<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>个人主页</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/personalPage.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <style>

    </style>
</head>
<body>
    <div style="background: #f4f6f9;height: 100%;width: 100%;margin-top: 5%;">
        <div class="div-bottom">
            <div class="div-bottom-top">
                <div style="height: 114px;background-color: #b5b0b0;">
                    <div class="ip-style">
                        <i class="fa fa-map-marker" style="margin-right: 4px;"></i>
                        IP 属地•<span id="address"></span>
                    </div>
                </div>
                <div style="height: calc(210px - 114px);display: flex;">
                    <div class="photo-style">
                        <img id="photo" src="../imgs/index-imgs/user-img.png" style="width: 140px;">
                    </div>
                    <div style="display: inline-block;margin: 8px 0px 0 10px;">
                        <span id="username" style="font-weight: 700;font-size: 20px;">用户名</span><br>
                        <span id="introduce" style="padding-top: 10px;display: inline-block;color: #292929;"></span>
                    </div>
                    <div id="btn-div" style="width: auto;height: 100%;float: left;margin: 0px 20px 0 auto;">
                        <a href="updateUser.jsp" target="menuFrame">
                            <input type="button" id="update-btn" value="编辑个人资料" class="update-button">
                        </a>
                    </div>
                </div>
            </div>

            <div class="div-bottom-bottom">
                <div class="div-bottom-bottom-left">
                    <div style="height: 45px;border-bottom: 1px solid #d2d2d2;">
                        <ul style="padding-left: 15px;">
                            <li id="oli1" class="li-module" style="padding-bottom: 9px">动态</li>
                            <li id="oli2" class="li-module" style="padding-bottom: 9px">回答</li>
                            <li id="oli3" class="li-module" style="padding-bottom: 9px">视频</li>
                            <li id="oli4" class="li-module" style="padding-bottom: 9px">提问</li>
                            <li id="oli5" class="li-module" style="padding-bottom: 9px">文章</li>
                            <li id="oli6" class="li-module" style="padding-bottom: 9px">专栏</li>
                            <li id="oli7" class="li-module" style="padding-bottom: 9px">想法</li>
                            <li id="oli8" class="li-module" style="padding-bottom: 9px">收藏</li>
                            <li id="oli9" class="li-module" style="padding-bottom: 9px">关注</li>
                        </ul>
                    </div>
                    <div id="div-module" style="height: calc(400px - 45px);display: flex;flex-direction: column;background-color: white;">

                    </div>
                </div>
                <div class="div-bottom-bottom-right">
                    <div style="height: 80px;background-color: white;display: flex;">
                        <div id="interest" class="interest" style="width: 50%;border-right: 1px solid #cdcdcd;display: flex;flex-direction: column;align-items: center;justify-content: center;">
                            <div class="interest-style">关注了</div>
                            <div id="interestCount" class="interestCount-style">0</div>
                        </div>
                        <div id="noticer" class="noticer" style="width: calc(100% - 50%);display: flex;flex-direction: column;align-items: center;justify-content: center;">
                            <div class="interest-style">关注者</div>
                            <div id="noticerCount" class="noticerCount-style">0</div>
                        </div>
                    </div>
                    <div class="div-bottom-bottom-right-bottom">
                        <a href="https://tsm.miit.gov.cn/dxxzsp/" target="_blank" rel="noopener noreferrer">京 ICP 证 110745 号</a> · <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">京 ICP 备 13052560 号 - 1</a> · <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020088" target="_blank" rel="noopener noreferrer">京公网安备 11010802020088 号</a> · <a href="https://www.zhihu.com/certificates" target="_blank" rel="noopener noreferrer">京网文[2022]2674-081 号</a> · <a href="https://pic3.zhimg.com/v2-c280f8bce57f9b045b83185384d86027.png" target="_blank" rel="noopener noreferrer">药品医疗器械网络信息服务备案（京）网药械信息备字（2022）第00334号</a> · <a href="https://www.zhihu.com/certificates" target="_blank" rel="noopener noreferrer">广播电视节目制作经营许可证:（京）字第06591号</a> · <span>服务热线：400-919-0001</span> · <a rel="noopener noreferrer" target="_blank" href="//ir.zhihu.com" class="css-6lgbq5">Investor Relations</a> · <span> © 2024 知乎</span> <span>北京智者天下科技有限公司版权所有</span> · <span>违法和不良信息举报：010-82716601</span> · <a href="mailto:jubao@zhihu.com">举报邮箱：jubao@zhihu.com</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        <% Object username = session.getAttribute("username");%>
        let userId = 0;
        let he;
        let iframe = window.parent.document.getElementById("menuFrame").contentWindow.document;
        let src = iframe.URL;
        let substr = src.substr(src.lastIndexOf("=")+1);
        let username1 = decodeURIComponent(substr); //url传参后解码
        let fn = null;
        window.addEventListener('message',fn)
        window.onmessage = function (e) {
            console.log(e.data)
            }

        $(function () {

            if (username1 == "http://localhost:8080/zhihu1/view/personalPage.jsp"){
                selectUser("<%=username%>");
                he = "我";
            }else {
                $.ajax({
                    async: true,
                    type: "post",
                    url: "http://localhost:8080/zhihu1/user?ac=queryMutualAttention",
                    dataType: "json",
                    data:{
                        "username": "<%=username%>",
                        "username1": username1
                    },success:function (data){
                        $("#btn-div").empty();
                        if (data.data){
                            let content1 = `<div style="padding-top: 50px;">
                                                <input type="hidden" id="heId" value="" style="display: none">
                                                <input type="button"  id="focus-btn" onclick="focusBtnUnfollowOrInterest()" onmouseover="focusBtnMouseover()" onmouseout="focusBtnMouseout()" style="width: 100px;height: 30px;font-size: 14px;background: #979797;border: none;border-radius: 4px;color: white;margin-right: 10px;" value="已关注">
                                                <button class="private-message-btn" onclick="messageUser()"><i class="fa fa-comments"></i>&nbsp;发私信</button>
                                            </div>`;
                            $("#btn-div").append(content1);
                        }else {
                            let content1 = `<div id="" style="padding-top: 50px;">
                                                <input type="hidden" id="heId" value="" style="display: none">
                                                <input type="button" id="focus-btn" onclick="focusBtnUnfollowOrInterest()" onmouseover="focusBtnMouseover()" onmouseout="focusBtnMouseout()" style="width: 100px;height: 30px;font-size: 14px;background: #0066ff;border: none;border-radius: 4px;color: white;margin-right: 10px;" value="+  关注">
                                                <button class="private-message-btn" onclick="messageUser()"><i class="fa fa-comments"></i>&nbsp;发私信</button>
                                            </div>`;
                            $("#btn-div").append(content1);
                        }
                        selectUser(username1);
                    },error:function (error){
                        console.log(error);
                    }
                })
                he = "他";
            }

            $("#oli1").css("border-bottom","4px solid rgb(23 134 249)");
            let html = `<div class="module">`+he+`的动态</div>`;
            $("#div-module").append(html);

            $(".li-module").on("click",function (event){
                let src = event.target;
                let val = $(src).text();

                let arr = $(".li-module");
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i] != this){
                        arr[i].style = "padding-bottom: 9px;";
                    }
                }
                $(this).css("border-bottom","4px solid rgb(23 134 249)");

                let content;
                if (val === "动态"){
                    $("#div-module").empty();
                    content = `<div class="module">`+he+`的` + val + `</div>
                                <div style="margin: 0 20px;border-top: 1px solid #d2d2d2;text-align: center;height: 100%;padding: 20px;">
                                    <img src="../imgs/other-imgs/dynamic-img.png">
                                    <p style="color: #c4c4c4;">还没有动态</p>
                                </div>`;
                    $("#div-module").append(content);
                }else if (val === "回答") {
                    $("#div-module").empty();
                    content = `<div class="module">`+he+`的` + val + `</div>
                                <div style="margin: 0 20px;border-top: 1px solid #d2d2d2;text-align: center;height: 100%;padding: 20px;">
                                    <img src="../imgs/other-imgs/answer-img.png">
                                    <p style="color: #c4c4c4;">还没有回答</p>
                                </div>`;
                    $("#div-module").append(content);
                }else if (val === "视频"){
                    $("#div-module").empty();
                    content = `<div class="module">`+he+`的`+val+`</div>`;
                    $("#div-module").append(content);
                }else if (val === "提问"){
                    $("#div-module").empty();
                    content = `<div class="module">`+he+`的`+val+`</div>`;
                    $("#div-module").append(content);
                }else if (val === "文章"){
                    $("#div-module").empty();
                    content = `<div class="module">`+he+`的`+val+`</div>`;
                    $("#div-module").append(content);
                }else if (val === "专栏"){
                    $("#div-module").empty();
                    content = `<div class="module">`+he+`的`+val+`</div>`;
                    $("#div-module").append(content);
                }else if (val === "想法"){
                    $("#div-module").empty();
                    content = `<div class="module">`+he+`的`+val+`</div>
                                <div style="margin: 0 20px;border-top: 1px solid #d2d2d2;text-align: center;height: 100%;padding: 20px;">
                                    <img src="../imgs/other-imgs/interest-img.png">
                                    <p style="color: #c4c4c4;">还没有想法</p>
                                </div>`;
                    $("#div-module").append(content);
                }else if (val === "收藏"){
                    $("#div-module").empty();
                    content = `<div class="module">`+he+`的`+val+`</div>
                                <div style="margin: 0 20px;border-top: 1px solid #d2d2d2;text-align: center;height: 100%;padding: 20px;">
                                    <img src="../imgs/other-imgs/interest-img.png">
                                    <p style="color: #c4c4c4;">还没有收藏</p>
                                </div>`;
                    $("#div-module").append(content);
                }else if (val === "关注"){
                    $("#div-module").empty();
                    let content1 = `<div style="height: 45px;margin: 0 20px;">
                                        <ul style="padding-left: 5px;">
                                            <li id="attention1" onclick="myAttentionStyle()">`+he+`关注的人</li>
                                            <li id="attention2" onclick="followMyStyle()">关注`+he+`的人</li>
                                        </ul>
                                    </div>
                                    <div id="focusUsers"></div>`;
                    $("#div-module").append(content1);

                    $("#attention1").css("color","#000000");
                    $("#attention1").css("font-weight","600");

                    if (he == "他"){
                        myInterest(username1); //查看关注我的用户信息
                    }else {
                        myInterest("<%=username%>"); //查看关注我的用户信息
                    }
                }
            })

            let ouserImg = $("#userImg");
            ouserImg.on("focus",function (){
                $("#myDropdown").css("display","block");
            })

            ouserImg.on("blur",function (){
                $("#myDropdown").css("display","none");
            })

            $("html").on("click",function (event){
                window.parent.$("#myDropdown").css("display","none");
                window.parent.close()
                window.parent.$(".dropdown-news").css("display","none");
            })
        })
        function focusBtnUnfollowOrInterest(){
            window.parent.prohibition();
            let userId1 = window.parent.variableParent();
            var text = $("#focus-btn").val();
            if (text === "取消关注"){
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/zhihu1/user?ac=modifyFollowTombstone",
                    dataType: "json",
                    data:{
                        "tombstone": '1',
                        "userId": userId1,
                        "user1Id": userId
                    },success:function (data){
                        if(data.data){
                            $("#focus-btn").val("+  关注");
                            $("#focus-btn").css("background-color","#0065ff");
                            if (he == "他"){
                                // selectUser(username1); //查看关注我的用户信息
                            }else {
                                selectUser("<%=username%>"); //查看关注我的用户信息
                            }
                        }else {
                            alert("服务器错误，请重试")
                        }
                    },error:function (error) {
                        console.log(error)
                    }
                })
            }else if (text === "+  关注"){
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/zhihu1/user?ac=modifyFollowTombstone",
                    dataType: "json",
                    data:{
                        "tombstone": '0',
                        "userId": userId1,
                        "user1Id": userId
                    },success:function (data){
                        if(data.data){
                            $("#focus-btn").val("已关注");
                            $("#focus-btn").css("background-color","#979797");
                            if (he == "他"){
                                // selectUser(username1); //查看关注我的用户信息
                            }else {
                                selectUser("<%=username%>"); //查看关注我的用户信息
                            }
                        }else {
                            alert("服务器错误，请重试")
                        }
                    },error:function (error) {
                        console.log(error)
                    }
                })
            }
        }
        function focusBtnMouseover(){
            if($("#focus-btn").val() === "+  关注"){
                $("#focus-btn").css("background-color","rgb(48 0 255)");
            }else if($("#focus-btn").val() === "已关注"){
                $("#focus-btn").val("取消关注");
            }
        }
        function focusBtnMouseout(){
            if($("#focus-btn").val() === "+  关注"){
                $("#focus-btn").css("background-color","#0065ff");
            }else if ($("#focus-btn").val() === "取消关注"){
                $("#focus-btn").val("已关注");
            }
        }

        function myAttentionStyle(){
            $("#attention1").css("color","#000000");
            $("#attention1").css("font-weight","600");

            $("#attention2").css("color","");
            $("#attention2").css("font-weight","");
            if (he == "他"){
                myInterest(username1); //查看我的关注
            }else {
                myInterest("<%=username%>"); //查看我的关注
            }
        }
        function followMyStyle(){
            $("#attention1").css("color","");
            $("#attention1").css("font-weight","");

            $("#attention2").css("color","#000000");
            $("#attention2").css("font-weight","600");

            if (he == "他"){
                followMe(username1); //查看关注我的用户信息
            }else {
                followMe("<%=username%>"); //查看关注我的用户信息
            }
        }

        // 查询关注人数和粉丝数
        function selectUser(username){
            $.ajax({
                type:"post",
                url:"http://localhost:8080/zhihu1/user?ac=queryInterest",
                dataType: "json",
                data:{
                    "username": username
                },success:function (data){
                    userId = data.data[0].user.id;
                    $("#userImg").attr("src",data.data[0].user.img);
                    $("#photo").attr("src",data.data[0].user.img);
                    $("#username").text(data.data[0].user.userName);
                    $("#introduce").text(data.data[0].user.introduce);
                    $("#address").text(data.data[0].user.address);
                    $("#interestCount").text(data.data[0].interestCount);
                    $("#noticerCount").text(data.data[0].noticerCount);
                },error:function (error){
                    console.log(error);
                }
            })
        }

        // 我关注的用户取关或关注
        function unfollowOrInterest(userId,user1Id){
            window.parent.prohibition();
            let text = $("#user1Id"+user1Id).val();

            if (text === "取消关注"){
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/zhihu1/user?ac=modifyFollowTombstone",
                    dataType: "json",
                    data:{
                        "tombstone": '1',
                        "userId": userId,
                        "user1Id": user1Id
                    },success:function (data){
                        if(data.data){
                            $("#user1Id"+user1Id).val("+  关注");
                            $("#user1Id"+user1Id).css("background-color","#0065ff");
                            if (he == "他"){
                                // selectUser(username1); //查看关注我的用户信息
                            }else {
                                selectUser("<%=username%>"); //查看关注我的用户信息
                            }
                        }else {
                            alert("服务器错误，请重试")
                        }
                    },error:function (error) {
                        console.log(error)
                    }
                })
            }else if (text === "+  关注"){
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/zhihu1/user?ac=modifyFollowTombstone",
                    dataType: "json",
                    data:{
                        "tombstone": '0',
                        "userId": userId,
                        "user1Id": user1Id
                    },success:function (data){
                        if(data.data){
                            $("#user1Id"+user1Id).val("已关注");
                            $("#user1Id"+user1Id).css("background-color","#979797");
                            if (he == "他"){
                                // selectUser(username1); //查看关注我的用户信息
                            }else {
                                selectUser("<%=username%>"); //查看关注我的用户信息
                            }
                        }else {
                            alert("服务器错误，请重试")
                        }
                    },error:function (error) {
                        console.log(error)
                    }
                })
            }
        }

        // 关注我的用户 回关或取关
        function unfollowOrInterest1(userId,user1Id){
            window.parent.prohibition();
            let text = $("#user1Id"+user1Id).val();
            if (text === "取消关注"){
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/zhihu1/user?ac=modifyFollowTombstone",
                    dataType: "json",
                    data:{
                        "tombstone": "1",
                        "userId": userId,
                        "user1Id": user1Id
                    },success:function (data){
                        if(data.data){
                            console.log($("#span"+user1Id).text())
                            $("#span"+user1Id).text("关注了你");
                            $("#user1Id"+user1Id).val("+  关注");
                            $("#user1Id"+user1Id).css("background-color","#0065ff");
                            if (he == "他"){
                                // selectUser(username1); //查看关注我的用户信息
                            }else {
                                selectUser("<%=username%>"); //查看关注我的用户信息
                            }
                        }else {
                            alert("服务器错误，请重试")
                        }
                    },error:function (error) {
                        console.log(error)
                    }
                })
            }else if(text === "+  关注"){
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/zhihu1/user?ac=addFollow",
                    dataType: "json",
                    data: {
                        "userId": userId,
                        "user1Id": user1Id,
                    },success:function (data){
                        if (data.data){
                            console.log($("#span"+user1Id).text())
                            $("#span"+user1Id).text("相互关注");
                            $("#user1Id"+user1Id).val("已关注");
                            $("#user1Id"+user1Id).css("background-color","#979797");
                            if (he == "他"){
                                // selectUser(username1); //查看关注我的用户信息
                            }else {
                                selectUser("<%=username%>"); //查看关注我的用户信息
                            }
                        }else {
                            alert("服务器异常，请重试")
                        }
                    },error:function (error){
                        console.log(error);
                    }
                })
            }
        }
        // 鼠标滑入
        function interestbuttonMouseover(id){
            if($("#user1Id"+id).val() === "+  关注"){
                $("#user1Id"+id).css("background-color","rgb(48 0 255)");
            }else if($("#user1Id"+id).val() === "已关注"){
                $("#user1Id"+id).val("取消关注");
            }

            if($("#heId").val() === "+  关注"){
                $("#heId").css("background-color","rgb(48 0 255)");
            }else if($("#heId").val() === "已关注"){
                $("#heId").val("取消关注");
            }

        }

        // 鼠标滑出
        function unfollowButtonMouseout(id){
            if($("#user1Id"+id).val() === "+  关注"){
                $("#user1Id"+id).css("background-color","#0065ff");
            }else if ($("#user1Id"+id).val() === "取消关注"){
                $("#user1Id"+id).val("已关注");
            }

            if($("#heId").val() === "+  关注"){
                $("#heId").css("background-color","#0065ff");
            }else if ($("#heId").val() === "取消关注"){
                $("#heId").val("已关注");
            }
        }

        // 查询关注我的人
        function followMe(username){
            $.ajax({
                type: "post",
                url: "http://localhost:8080/zhihu1/user?ac=queryFollowMeUser",
                dataType: "json",
                data:{
                    "username": username
                },success:function (data){
                    $("#focusUsers").empty();
                    if(data.data.length > 0){
                        $("#div-module").css("height","auto");
                        for (let i = 0; i < data.data.length; i++) {
                            let item = data.data[i];
                            content = `
                                <div style="margin: 0 20px;">
                                    <div style="height: 90px;display: flex;border-top: 1px solid #d2d2d2;">
                                        <img src="`+item.img+`" style="height: 65px;margin: 17px">
                                        <div style="width: calc(100% - 185px);display: flex;flex-direction: column;justify-content: space-between;">
                                            <div style="padding-top: 13px;font-weight: 700;font-size: 19px;display: flex;align-items: center;">
                                                `+item.user_name+`
                                                <span id="span`+item.id+`" style="background-color: #ececec;font-size: 11px;padding: 2px 12px;color: #8e8e8e;border-radius: 4px;margin-left: 6px;">`+item.mutualAttention+`</span>
                                            </div>
                                            <div style="font-size: 13px;color: #ababab;padding-bottom: 5px;">
                                                <span>`+item.interestCount+`</span>关注者
                                            </div>
                                        </div>
                                        <div style="width: 120px;display: flex;align-items: center;justify-content: center;">
                                            <input type="button" id="user1Id`+item.id+`" onclick="unfollowOrInterest1('`+userId+`','`+item.id+`');"  class="interest-button" onmouseover="interestbuttonMouseover(`+item.id+`)" onmouseout="unfollowButtonMouseout(`+item.id+`)" value="`+item.btn+`">
                                        </div>
                                    </div>
                                </div>`;
                            $("#focusUsers").append(content);
                        }
                    }else {
                        content = `<div style="margin: 0 20px;border-top: 1px solid #d2d2d2;text-align: center;height: 100%;padding: 20px;">
                                        <img src="../imgs/other-imgs/interest-img.png">
                                        <p style="color: #c4c4c4;">还没有关注的用户</p>
                                    </div>`;
                        $("#focusUsers").append(content);
                    }
                },error:function (error){
                    console.log(error);
                }
            })
        }

        function messageUser(){
            window.parent.list(userId,$("#username").html(),$("#photo").attr("src"))
        }

        // 查询我的关注
        function myInterest(username){
            $.ajax({
                type: "post",
                url: "http://localhost:8080/zhihu1/user?ac=queryMyInterestUser",
                dataType: "json",
                data: {
                    "username": username
                },success:function (data) {
                    $("#focusUsers").empty();
                    if(data.data.length > 0){
                        $("#div-module").css("height","auto");
                        for (let i = 0; i < data.data.length; i++) {
                            let item = data.data[i];
                            content = `
                                <div style="margin: 0 20px;">
                                    <div style="height: 90px;display: flex;border-top: 1px solid #d2d2d2;">
                                        <img src="`+item.img+`" style="height: 65px;margin: 17px">
                                        <div style="width: calc(100% - 185px);display: flex;flex-direction: column;justify-content: space-between;">
                                            <div style="padding-top: 13px;font-weight: 700;font-size: 19px;">
                                                `+item.user_name+`
                                            </div>
                                            <div style="font-size: 13px;color: #ababab;padding-bottom: 5px;">
                                                <span>`+item.cardCount+`</span>文章 · <span>`+item.interestCount+`</span>关注者
                                            </div>
                                        </div>
                                        <div style="width: 120px;display: flex;align-items: center;justify-content: center;">
                                            <input type="button" id="user1Id`+item.id+`" onclick="unfollowOrInterest('`+userId+`','`+item.id+`');"  class="interest-button" onmouseover="interestbuttonMouseover(`+item.id+`)" onmouseout="unfollowButtonMouseout(`+item.id+`)" value="已关注">
                                        </div>
                                    </div>
                                </div>`;
                            $("#focusUsers").append(content);
                        }
                    }else {
                        content = `<div style="margin: 0 20px;border-top: 1px solid #d2d2d2;text-align: center;height: 100%;padding: 20px;">
                                        <img src="../imgs/other-imgs/interest-img.png">
                                        <p style="color: #c4c4c4;">还没有关注的用户</p>
                                    </div>`;
                        $("#focusUsers").append(content);
                    }
                },error:function (error){
                    console.log(error)
                }
            })
        }
    </script>
</body>
</html>
